<template>
	<view class="weather">
		<h1>今日天气</h1>
		<image :src="weatherIcon" mode="aspectFit"></image>
		<text class="wendu">{{ temperature }}°C</text>
		<text class="tianqi">{{ weatherDescription }}</text>
		<text class="shidu">{{ windDir }} {{ windSpeed }}级</text>
		<view class="dll1">
			<text class="tigan">湿度：{{ humidity }}%</text>
			<text>体感温度：{{ feelsLike }}°C</text>
		</view>
	<view class="weekly-weather">
		<text class="weekly-title">一周天气预报</text>
		<view v-for="(day, index) in weeklyData" :key="index" class="day-weather">
			<text>{{ day.date }} - {{ day.week }}</text>
			<text>天气: {{ day.type }}</text>
			<text>温度: {{ day.low }} ~ {{ day.high }}</text>
			<text>风向: {{ day.fengxiang }}</text>
			<text>风力: {{ day.fengli }}</text>
		</view>
	</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"

	const temperature = ref('')
	const weatherIcon = ref('')
	const weatherDescription = ref('')
	const humidity = ref('')
	const windSpeed = ref('')
	const feelsLike = ref('')
	const windDir = ref('')
	const weeklyData = ref([])

	async function getWeather() {
		try {
			const url = `${CONFIG.hefeng_now}?location=${CONFIG.hefeng_location}&key=${CONFIG.hefeng_key}`
			let res = await uni.$get(url)
			console.log("天气响应：", res)
			if (res.statusCode == 200) {
				const weatherData = res.data.now
				temperature.value = weatherData.temp
				weatherIcon.value = `/static/weather/${weatherData.icon}.png`
				weatherDescription.value = weatherData.text
				humidity.value = weatherData.humidity
				windSpeed.value = weatherData.windScale
				feelsLike.value = weatherData.feelsLike
				windDir.value = weatherData.windDir
			}
		} catch (error) {
			console.error("获取天气失败：", error)
		}
	}

	async function fetchWeeklyWeather() {
		try {
			const response = await fetch('https://api.vvhan.com/api/weather?city=%E8%A5%BF%E5%AE%89&type=week');
			const data = await response.json();
			if (data.success) {
				weeklyData.value = data.data;
			}
		} catch (error) {
			console.error('Failed to fetch weekly weather:', error);
		}
	}

	onMounted(() => {
		getWeather()
		fetchWeeklyWeather()
	})
</script>

<style scoped>
	h1{
		color: white;
		
	}
	.weather {
		background-image: url('http://spa7huiam.hn-bkt.clouddn.com/%E7%94%9F%E6%88%90%E7%89%B9%E5%AE%9A%E9%A3%8E%E6%A0%BC%E5%9B%BE%E7%89%87.png');
		background-size: cover;
		background-position: center;
		padding: 20px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wendu,
	.tianqi,
	.shidu,
	.tigan {
		font-size: 18px;
		margin: 5px 0;
	}

	.dll1 {
		display: flex;
		justify-content: space-between;
		width: 93%;
		padding: 10px;
		background-color: rgba(240, 240, 240, 0.2);
		border-radius: 8px;
		margin-top: 10px;
		border: 2px solid #CCFFFF;
	}

	.forecast {
		margin-top: 20px;
		width: 100%;
	}

	.forecast-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.forecast-item {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: #e0e0e0;
		border-radius: 8px;
		margin-bottom: 5px;
	}

	image {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}

	.weekly-weather {
		margin-top: 20px;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 10px;
		padding: 10px;
		border: 2px solid #CCFFFF;
	}

	.weekly-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.day-weather {
		margin-bottom: 10px;
		padding: 10px;
		background-color: rgba(240, 240, 240, 0.2);
		border-radius: 5px;
		border: 2px solid #CCFFFF;
	}
</style>